<%@page import="fu.abc.DAO.LocationDAO"%>
<%@page import="fu.abc.model.Link"%>
<%@page import="fu.abc.DAO.AccountDAO"%>
<%@page import="fu.abc.model.Account"%>
<%@page import="fu.abc.DAO.CategoryDAO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="fu.abc.model.Category"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en" class="no-js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.min.js"></script>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Content Editor - Tạo địa điểm mới</title>
		
		<link rel="stylesheet" type="text/css" href="css/createlocal.css" />
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<link rel="stylesheet" type="text/css" href="css/4.css"/>
     	
     	<link rel="stylesheet" type="text/css" href="./content-editor/css/createlocal.css" />
		<link rel="stylesheet" type="text/css" href="./content-editor/css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="./content-editor/css/demo.css" />
		<link rel="stylesheet" type="text/css" href="./content-editor/css/component.css" />
		<link rel="stylesheet" type="text/css" href="./content-editor/css/4.css"/>
		
		<script type="text/javascript" src="js/jquery.js"></script>
    	<script type="text/javascript" src="js/jts.js"></script>
    	<script type="text/javascript" src="js/validateAdd.js"></script>
    	
    	<script type="text/javascript" src="./content-editor/js/jquery.js"></script>
    	<script type="text/javascript" src="./content-editor/js/jts.js"></script>
    	<script type="text/javascript" src="./content-editor/js/validateAdd.js"></script>

		<script src="js/modernizr.custom.js"></script>
		<script src="./content-editor/js/modernizr.custom.js"></script>
		<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
		<script>
			function initialize() {
				  var mapOptions = {
				    center: new google.maps.LatLng(14.774883,107.922821),
				    zoom: 13
				  };
				  var map = new google.maps.Map(document.getElementById('map-canvas'),
				    mapOptions);
		
				  var input = (document.getElementById('district'));
	// 			  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
				  var autocomplete = new google.maps.places.Autocomplete(input);
				  autocomplete.bindTo('bounds', map);
		
				  var infowindow = new google.maps.InfoWindow();
				  var marker = new google.maps.Marker({
				    map: map,
				    anchorPoint: new google.maps.Point(0, -29)
				  });
		
				  google.maps.event.addListener(autocomplete, 'place_changed', function() {
				    infowindow.close();
				    marker.setVisible(false);
				    var place = autocomplete.getPlace();
				    if (!place.geometry) {
				      return;
				    }
		
				    // If the place has a geometry, then present it on a map.
				    if (place.geometry.viewport) {
				      map.fitBounds(place.geometry.viewport);
				    } else {
				      map.setCenter(place.geometry.location);
				      map.setZoom(17);  // Why 17? Because it looks good.
				    }
				    /** @type {google.maps.Icon} */
				    marker.setIcon(({
				      url: place.icon,
				      size: new google.maps.Size(71, 71),
				      origin: new google.maps.Point(0, 0),
				      anchor: new google.maps.Point(17, 34),
				      scaledSize: new google.maps.Size(35, 35)
				    }));
				    marker.setPosition(place.geometry.location);
				    marker.setVisible(true);
				  });
				}
		
			google.maps.event.addDomListener(window, 'load', initialize);
		</script>
		
		<script>
                $(document).ready(function () {
                
                        $('#demoTable').jTPS( {perPages:[5,12,15,50,'ALL'],scrollStep:1,scrollDelay:30,
                                clickCallback:function () {     
                                        // target table selector
                                        var table = '#demoTable';
                                        // store pagination + sort in cookie 
                                        document.cookie = 'jTPS=sortasc:' + $(table + ' .sortableHeader').index($(table + ' .sortAsc')) + ',' +
                                                'sortdesc:' + $(table + ' .sortableHeader').index($(table + ' .sortDesc')) + ',' +
                                                'page:' + $(table + ' .pageSelector').index($(table + ' .hilightPageSelector')) + ';';
                                }
                        });

                        // reinstate sort and pagination if cookie exists
                        var cookies = document.cookie.split(';');
                        for (var ci = 0, cie = cookies.length; ci < cie; ci++) {
                                var cookie = cookies[ci].split('=');
                                if (cookie[0] == 'jTPS') {
                                        var commands = cookie[1].split(',');
                                        for (var cm = 0, cme = commands.length; cm < cme; cm++) {
                                                var command = commands[cm].split(':');
                                                if (command[0] == 'sortasc' && parseInt(command[1]) >= 0) {
                                                        $('#demoTable .sortableHeader:eq(' + parseInt(command[1]) + ')').click();
                                                } else if (command[0] == 'sortdesc' && parseInt(command[1]) >= 0) {
                                                        $('#demoTable .sortableHeader:eq(' + parseInt(command[1]) + ')').click().click();
                                                } else if (command[0] == 'page' && parseInt(command[1]) >= 0) {
                                                        $('#demoTable .pageSelector:eq(' + parseInt(command[1]) + ')').click();
                                                }
                                        }
                                }
                        }

                        // bind mouseover for each tbody row and change cell (td) hover style
                        $('#demoTable tbody tr:not(.stubCell)').bind('mouseover mouseout',
                                function (e) {
                                        // hilight the row
                                        e.type == 'mouseover' ? $(this).children('td').addClass('hilightRow') : $(this).children('td').removeClass('hilightRow');
                                }
                        );

                });


        </script>
        
        <script type="text/javascript">
		    var _gaq = _gaq || [];
		    _gaq.push(['_setAccount', 'UA-29994824-22']);
		    _gaq.push(['_trackPageview']);
		
		    (function () {
		        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		    })();
		</script>
		
		
<!-- star validate phone -->
		
<!-- <!-- 		<script type="text/javascript"> -->
<!-- // 			$(document).ready(function() { -->
<!-- // 			    $('#txtPhone').blur(function(e) { -->
<!-- // 			        if (validatePhone('txtPhone')) { -->
<!-- // 			            $('#spnPhoneStatus').html(' '); -->
<!-- // 			            $('#spnPhoneStatus').css('color', 'green'); -->
<!-- // 			        } -->
<!-- // 			        else { -->
<!-- // 			            $('#spnPhoneStatus').html(' Độ dài từ 8 đến 11 số '); -->
<!-- // 			            $('#spnPhoneStatus').css('color', 'red'); -->
<!-- // 			        } -->
<!-- // 			    }); -->
<!-- // 			}); -->
<!-- // 			$(document).ready(function() { -->
<!-- // 			    $('#txtWebsite').blur(function(e) { -->
<!-- // 			        if (validateWeb('txtWebsite')) { -->
<!-- // 			            $('#spnWebStatus').html(' '); -->
<!-- // 			            $('#spnWebStatus').css('color', 'green'); -->
<!-- // 			        } -->
<!-- // 			        else { -->
<!-- // 			            $('#spnWebStatus').html(' Không hợp lệ '); -->
<!-- // 			            $('#spnWebStatus').css('color', 'red'); -->
<!-- // 			        } -->
<!-- // 			    }); -->
<!-- // 			}); -->
			
<!-- // 			function validatePhone(txtPhone) { -->
<!-- // 			    var a = document.getElementById(txtPhone).value; -->
<!-- // 			    var filter = /0\d{9,10}/; -->
<!-- // 			    if (filter.test(a)) { -->
<!-- // 			        return true; -->
<!-- // 			    } -->
<!-- // 			    else { -->
<!-- // 			        return false; -->
<!-- // 			    } -->
<!-- // 			} -->
<!-- // 			function validateWeb(txtWebsite) { -->
<!-- // 			    var a = document.getElementById(txtWebsite).value; -->
<!-- // 			    var filter = /^([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/; -->
<!-- // 			    if (filter.test(a)) { -->
<!-- // 			        return true; -->
<!-- // 			    } -->
<!-- // 			    else { -->
<!-- // 			        return false; -->
<!-- // 			    } -->
<!-- // 			} -->
<!-- 			</script> -->
        <style>
			body {
				font-family: 'Open Sans', sans-serif;
				font-size: 15px;
			}
			
			#demoTable thead th {
				white-space: nowrap;
				overflow-x: hidden;
				padding: 3px;
			}
			
			#demoTable tbody td {
				padding: 3px;
			}
			span
			{
    		font-weight:inherit;
			}
/* 			a.logout{ */
/* 				margin-left: 100px; */
/* 			} */
		</style>
<!-- End validate phone		 -->

	</head>
	<body>
		<div class="container">
			<!-- Push Wrapper -->
			<div class="mp-pusher" id="mp-pusher">

				<!-- mp-menu -->
				<nav id="mp-menu" class="mp-menu">
					<div class="mp-level">
						<ul>
							<li><a href="/Vnplace/content-editor/contenteditor.jsp">Trang chủ</a></li>
							<li><a href="/Vnplace/content-editor/manageLocation.jsp">Quản lý địa điểm</a></li>
							<li class="create"><a href="/Vnplace/content-editor/manageCategory.jsp" >Quản lý nhóm địa điểm</a></li>
							<li class="error"><a href="/Vnplace/content-editor/manageerror.jsp" >Quản lý lỗi</a></li>
							<li class="error"><a href="/Vnplace/content-editor/logout.jsp" >Đăng xuất</a></li>
						</ul>	
					</div>
				</nav>
				<!-- /mp-menu -->

				<div class="scroller"><!-- this is for emulating position fixed of the nav -->
					<div class="scroller-inner">
						
						<!-- Top Navigation -->
						<div class="codrops-top clearfix">
							<p><a href="#" id="trigger" class="menu-trigger"><b>Content Editor</b></a></p>
							<% 
								String acc = (String)session.getAttribute("acc");
 								if(acc==null){ 
									response.sendRedirect("/Vnplace/systemAdmin/login.jsp"); 
								}else{ 
							%> 
							<p class="hello">Chào <b><%=acc %></b></p>
							<%	} %>
						</div>
<!-- 						header -->
						<div id="header-title">
							<h3>Tạo địa điểm mới</h3>
						</div>
						<hr style="width: 900px"/>
						<div class="content clearfix">
							<table>
								<tr>
									<td valign="top" style="background: #F0F0F0">
										<div id="main">
											<section id="main_content" class="inner">
<!-- 						form action -->
												<form action="/Vnplace/CreateLocation" method="post">
													<fieldset id="fieldset">
														<div class="title">
															<p class="p-title">Tạo địa điểm mới</p>
														</div>								
														<hr/>
														<h3 style="margin-left: 30px; font-size: 1.1em">Thông tin cơ bản</h3>
														<hr width="650px"/>
															<div id="label-name">
																<label>Tên địa điểm <span>(*)</span>:</label><br/>
																<input type="text" name="localname"id="local-name" size="30" required="required"/>
															</div>
															<b class="map">Chọn vị trí của địa điểm trên bản đồ</b><br/>
														
															<div id="label-category">
																<label>Nhóm địa điểm <span>(*)</span>:</label><br/>
																<select id="category" name="category">
																	<%
																		List<Category> cate = new ArrayList();
																		CategoryDAO catedao = new CategoryDAO();
																		cate = catedao.listAllCategory();
																		for(Category c: cate){
																	%>
																		<option value="<%=c.getIdcate()%>"><%=c.getCategory() %></option>
																	<%} %>
																</select>
															</div>
															
															<div id="map-canvas"></div>
															<div id="label-address">
																<label>Tỉnh  <span>(*)</span>:</label> <br/>
																<select id="province" name="province">
																	<option value="" selected="selected">------- Chọn -------</option>
																	<option value="1">An Giang</option>
																	<option value="2">B&#224; Rịa Vũng T&#224;u</option>
																	<option value="3">Bắc Giang</option>
																	<option value="4">Bắc Kạn</option>
																	<option value="5">Bạc Li&#234;u</option>
																	<option value="6">Bắc Ninh</option>
																	<option value="7">Bến Tre</option>
																	<option value="8">B&#236;nh Định</option>
																	<option value="9">B&#236;nh Dương</option>
																	<option value="10">B&#236;nh Phước</option>
																	<option value="11">B&#236;nh Thuận</option>
																	<option value="12">C&#224; Mau</option>
																	<option value="13">Cần Thơ</option>
																	<option value="14">Cao Bằng</option>
																	<option value="15">Đ&#224; Nẵng</option>
																	<option value="16">Đắk Lắk</option>
																	<option value="17">Đăk N&#244;ng</option>
																	<option value="18">Điện Bi&#234;n</option>
																	<option value="19">Đồng Nai</option>
																	<option value="20">Đồng Th&#225;p</option>
																	<option value="21">Gia Lai</option>
																	<option value="22">H&#224; Giang</option>
																	<option value="23">H&#224; Nam</option>
																	<option value="24">H&#224; Nội</option>
																	<option value="25">H&#224; Tĩnh</option>
																	<option value="26">Hải Dương</option>
																	<option value="27">Hải Ph&#242;ng</option>
																	<option value="28">Hậu Giang</option>
																	<option value="29">H&#242;a B&#236;nh</option>
																	<option value="30">Hưng Y&#234;n</option>
																	<option value="31">Kh&#225;nh H&#242;a</option>
																	<option value="32">Ki&#234;n Giang</option>
																	<option value="33">Kon Tum</option>
																	<option value="34">Lai Ch&#226;u</option>
																	<option value="35">L&#226;m Đồng</option>
																	<option value="36">Lạng Sơn</option>
																	<option value="37">L&#224;o Cai</option>
																	<option value="38">Long An</option>
																	<option value="39">Nam Định</option>
																	<option value="40">Nghệ An</option>
																	<option value="41">Ninh B&#236;nh</option>
																	<option value="42">Ninh Thuận</option>
																	<option value="43">Ph&#250; Thọ</option>
																	<option value="44">Ph&#250; Y&#234;n</option>
																	<option value="45">Quảng B&#236;nh</option>
																	<option value="46">Quảng Nam</option>
																	<option value="47">Quảng Ng&#227;i</option>
																	<option value="48">Quảng Ninh</option>
																	<option value="49">Quảng Trị</option>
																	<option value="50">S&#243;c Trăng</option>
																	<option value="51">Sơn La</option>
																	<option value="52">T&#226;y Ninh</option>
																	<option value="53">Th&#225;i B&#236;nh</option>
																	<option value="54">Th&#225;i Nguy&#234;n</option>
																	<option value="55">Thanh H&#243;a</option>
																	<option value="56">Th&#224;nh Phố Hồ Ch&#237; Minh</option>
																	<option value="57">Thừa Thi&#234;n Huế</option>
																	<option value="58">Tiền Giang</option>
																	<option value="59">Tr&#224; Vinh</option>
																	<option value="60">Tuy&#234;n Quang</option>
																	<option value="61">Vĩnh Long</option>
																	<option value="62">Vĩnh Ph&#250;c</option>
																	<option value="63">Y&#234;n B&#225;i</option>
																</select><br/>
																<label>Địa điểm chi tiết<span>(*)</span>:</label><br/>
																<input type="text" id="district" name="addresslocal" placeholder="Nhập đường(xã), quận(huyện)..." size="35" required="required"/><br/>    
															</div>
															<%
																Account account = new Account();
																AccountDAO accdao = new AccountDAO();
																account = accdao.getAccountbyUsername(acc);
															%>
															<input type="hidden" value="<%=account.getIdAcc()%>" name="account"/>
															<div id="label-phone">
																<label>Số điện thoại:</label><br/>
																<input type="text" name="phone" id="txtPhone"/><br />
																<span id="spnPhoneStatus"></span>
															</div>
															
															<div id="label-web">
																<label>Website:</label><br/>
																<input type="text" name="website" id="txtWebsite" size="30"/><br/>
																<span id="spnWebStatus"></span>
															</div>
															
															<div id="descript">
																<label>Mô tả chi tiết <span>(*)</span>:</label><br/>
																<textarea rows="10" cols="70" class="description" name="descript" required="required"></textarea>
															</div>
															<p style="margin-top: 10px; margin-left: 15px;">Những phần có đánh dấu (*) là những phần bắt buộc phải nhập.
															Phải nhập đúng tỉnh với tỉnh trong địa chỉ chi tiết</p>
															
															<input type="hidden" name="<%=acc%>"/>
<!-- 															<hr width="600px"/> -->
															<div id="button">
																<ul id="btn-ul">
																	<li><input type="submit" value="Tạo địa điểm mới" class="btn-create"/></li>
																	<li><input type="button" value="Hủy" class="btn-cancel"/></li>
																</ul>
															</div>
													</fieldset>	
														
												</form>
						<!-- 							end form -->
											 </section>
						<!-- 					 end section -->
										</div>
									</td>
<!-- 									create location -->
									<td valign="top" style="background: #F0F0F0">
										<div id="frame">
											<fieldset>
												<div class="title">
													<p class="p-title-url">Tìm kiếm thông tin</p>
												</div>	
												<hr/>
												<div id="main-frame">
													<form class="form">
														Nhập địa chỉ website: <input type="text" name="link" placeholder="Nhập link..." size="35"/>
														<input type="submit" value="Đi" class="go"/>
														<% String link = request.getParameter("link");%>
														<iframe width="600px" height="400px" src="<%=link%>"></iframe>
													</form>

													<hr/>
													<label class="link-list">Danh sách link:</label>
													<form action="/Vnplace/ListLinks" method="post">
														<ul id="ul-link">
															<li style="margin-right: 10px; margin-top: 5px;">Nhóm địa điểm</li>
															<li>
																<select id="category" name="category">
																	<option value="" selected="selected">------- Chọn -------</option>
																<%
																	for(Category c: cate){
																%>
																	<option value="<%=c.getIdcate()%>"><%=c.getCategory() %></option>
																<%} %>
																</select>
															</li>
															<li><input type="submit" value="Tìm kiếm" class="search"/></li>
														</ul>
													</form>
													<table id="demoTable" style="border: 1px solid #ccc;" cellspacing="0" width="600">
												        <thead>
												                <tr>
												                		<th>STT</th>
												                        <th>Nhóm địa điểm</th>
												                        <th>Từ khóa</th>
												                        <th>Danh sách link</th>
<!-- 												                        <th>Trạng thái</th> -->
												                </tr>
												        </thead>
												        <tbody>
												        	<%
												        	Object list = request.getAttribute("listLink");
															if(list!=null){
																List<Link> links = (List<Link>) list;
												        		int i =1;
												        		for(Link a: links){
												        		
												        	%>
												                <tr>
												                        <td  width="80" align="center"><%=i++ %></td>
												                        <td  width="180" align="left"><%=a.getCategory() %></td>
												                        <td ><%=a.getKeyword() %></td>
												                        <td ><a href="" class="link-a"><%=a.getLink() %></a></td>
<%-- 												                        <td ><%=a.getStatus() %></td> --%>
												                </tr>
												                <%} 
												        		} %>
														    </tbody>
														    <tfoot class="nav">
														          <tr>
														               <td colspan=4>
														                    <div class="pagination"></div>
														                    <div class="paginationTitle">Trang</div>
														                    <div class="selectPerPage"></div>
														                    <div class="status"></div>
														               </td>
														           </tr>
														    </tfoot>
														</table>           
												</div>
											</fieldset>
										</div> <!-- 	end frame-->
										
									</td>
								</tr>
							</table>
						</div>
						<div id="footer">
							<p class="copyright">©Copyright 2014 VnPlace.vn</p>
						</div>
					</div><!-- /scroller-inner -->
				</div><!-- /scroller -->
				
			</div><!-- /pusher -->
		</div><!-- /container -->
		<script src="js/classie.js"></script>
		<script src="js/mlpushmenu.js"></script>
		<script>
			new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ), {
				type : 'cover'
			} );
		</script>
	</body>
</html>